<template>
  <div id="car-type">
    <div id="car-type-title">
      <img src="static/img/yellow-con.png" class="car-type-img1">
      <img src="static/img/yellow-con.png" class="car-type-img2">
      <img src="static/img/yellow-con.png" class="car-type-img3">
      <img src="static/img/yellow-con.png" class="car-type-img4">
      <img src="static/img/blue-con.png" class="car-type-img9">
      <img src="static/img/blue-con.png" class="car-type-img10">
      <img src="static/img/blue-con.png" class="car-type-img11">
      <img src="static/img/blue-con.png" class="car-type-img12">
      <div class="car-type-title">
        <span>车辆类型展示</span>
      </div>
    </div>
    <img src="static/img/yellow-con.png" class="car-type-img5">
    <img src="static/img/yellow-con.png" class="car-type-img6">
    <img src="static/img/yellow-con.png" class="car-type-img7">
    <img src="static/img/yellow-con.png" class="car-type-img8">
    <div id="car-type-chart">
      <!--<img src="static/img/yellow-con.png" class="car-type-img5">-->
      <!--<img src="static/img/yellow-con.png" class="car-type-img6">-->
      <!--<img src="static/img/yellow-con.png" class="car-type-img7">-->
      <!--<img src="static/img/yellow-con.png" class="car-type-img8">-->
    </div>
  </div>
</template>

<script>
  export default {
    name: 'car-type',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        timeList : 1513645200000
      }
    },
    mounted() {
      this.drawLine();
      this.changeTimeList();
    },
    methods : {
      drawLine: function (data) {
        let histogramChart = echarts.init(document.getElementById('car-type-chart'));
        histogramChart.setOption({
          backgroundColor: 'rgba(7,34,31,0.80)',
          title: {},
          tooltip: {},
          legend: {
            left:'240px',
            data: ['活跃', '非活跃'],
            textStyle:{
              color:'#7AE9E5'
            }
          },
          grid: {
            left: '3%',
            right: '3%',
            bottom: '5%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#7AE9E5',
                type: 'solid',
                width:'1'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#7AE9E5'
              }
            },
            data: []
          },
          yAxis: {
            type : 'value',
            axisLine: {
              lineStyle: {
                color: '#7AE9E5',
                type: 'solid',
                width:'1'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#7AE9E5'
              }
            }
          },
          series: [{
            itemStyle:{
              emphasis: {
//                barBorderRadius: 7
              },
              normal:{
                color:'#2AA19D',
//                barBorderRadius: [7,7,0,0]
              }
            },
            barWidth:30,
            name: '活跃',
            type: 'bar',
            stack: 'chart',
            data: []
          },
            {
              itemStyle:{
                emphasis: {
                  barBorderRadius: 7
                },
                normal:{
                  color:'#7AE9E5',
                  barBorderRadius: [7,7,0,0]
                }
              },
              barWidth:30,
              name: '非活跃',
              type: 'bar',
              stack: 'chart',
              data: []
            }
          ]
        });
        const names = [];
        const actives = [];
        const inactives = [];

        $.ajax({
          type : 'get',
          async :true,
          url: 'http://203.81.245.37:2420/platformservice/left/' +this.timeList ,
          data : {},
          dataType: 'json',
          success : function (result) {
            if (result) {
              let result_carclassify = result.carclassify;
//              console.log(result_carclassify);
              for (var i=0;i<result_carclassify.length;i++) {
                names.push(result_carclassify[i].name)
              }
              for (var i=0;i<result_carclassify.length;i++) {
                actives.push(result_carclassify[i].active)
              }
              for (var i=0;i<result_carclassify.length;i++) {
                inactives.push(result_carclassify[i].inactive)
              }
              histogramChart.setOption({
                xAxis: {
                  data:names
                },
                series: [{
                  name:'活跃',
                  stack: 'chart',
                  data:actives
                },
                  {
                    name:'非活跃',
                    stack: 'chart',
                    data:inactives
                  }
                ]
              })
            }
          }
        })
//        $.get('./static/data.json').done(function (data) {
//          histogramChart.setOption({
//            xAxis: {
//              data:data.name
//            },
//            series :[{
//              name:'活跃',
//              data: data.active
//            }
////              {
////                name:'非活跃',
////                data: data.inactive
////              }
//            ]
//          })
//        });
      },
      changeTimeList: function () {
        var timeList = [1514422800000,1514336400000,1514250000000,1514163600000,1514077200000,1513990800000,1513904400000,1513818000000,1513731600000,1513645200000];
        var j = 0;
        setInterval( () => {
          this.timeList = timeList[j];
//          console.log(timeList[j]);
          if (j < timeList.length-1){
            j+=1;
          }else {
            j = 0;
          }
          this.drawLine();
        },60000)
//        setTimeout( () => {
//          for (var k=0;k<10;k++) {
//            var j = 0;
//            var _timeList = [1514422800000,1514336400000,1514250000000,1514163600000,1514077200000,1513990800000,1513904400000,1513818000000,1513731600000,1513645200000];
//            this.timeList = _timeList[k];
//            j++;
//            console.log('---------------');
//            console.log(this.timeList);
//          }
//        },10000)
      }
    }
  }
</script>

<style>
  #car-type {
    height: 260px;
    width: 440px;
    position:relative;
  }
  #car-type-title {
    height: 40px;
    width: 438px;
    background: rgba(7, 34, 31, 0.8);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(32, 221, 201, 0.8);
    border-image: initial;
  }
  .car-type-title {
    height: 30px;
    width: 428px;
    position: absolute;
    top: 6px;
    left: 6px;
    font-family: MicrosoftYaHeiUI;
    text-align: left;
    text-indent: 4px;
    font-size: 18px;
    line-height: 30px;
    color: rgb(239, 187, 66);
    letter-spacing: -0.45px;
    background: rgba(0, 158, 158, 0.2);
  }
  #car-type-chart {
    height: 217px;
    width: 438px;
    /*background: rgba(7,34,31,0.80);*/
    border: 1px solid rgba(32,221,201,0.80);
  }
  .car-type-img1 {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 3;
  }
  .car-type-img2 {
    position: absolute;
    top: -1px;
    left: 435px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .car-type-img3 {
    position: absolute;
    top: 38px;
    left: 435px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .car-type-img4 {
    position: absolute;
    top: 38px;
    left: -1px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .car-type-img5 {
    position: absolute;
    top: 41px;
    left: -1px;
    z-index: 3;
  }
  .car-type-img6 {
    position: absolute;
    top: 41px;
    left: 435px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .car-type-img7 {
    position: absolute;
    top: 257px;
    left: 435px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .car-type-img8 {
    position: absolute;
    top: 257px;
    left: -1px;
    transform: rotate(270deg);
    z-index: 3;
  }
  .car-type-img9 {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 3;
  }
  .car-type-img10 {
    position: absolute;
    top: 5px;
    left: 431px;
    transform: rotate(90deg);
    z-index: 3;
  }
  .car-type-img11 {
    position: absolute;
    top: 32px;
    left: 431px;
    transform: rotate(180deg);
    z-index: 3;
  }
  .car-type-img12 {
    position: absolute;
    top: 32px;
    left: 5px;
    transform: rotate(270deg);
    z-index: 3;
  }
</style>
